<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气查询</title>
</head>
<body>
   <div id="app">
       <input type="text" @keyup.enter="SearchWeather" v-model="city" placeholder="请输入内容...">
       <button @click="SearchWeather">搜索</button>
       <a href="javascrip:;" @click="chengCity('上海')">上海</a>
       <ul>
           <li v-for="item in weatherList">{{item.fengxiang}}</li>
       </ul>
   </div>




<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           city:'',
            weatherList:[],

        },
        methods:{
            SearchWeather:function () {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (response) {
                         console.log(response);
                         that.weatherList = response.data.data.forecast
                })

            },
            chengCity:function (city) {
                this.city = city;
                this.SearchWeather();

            }
        }

    });

</script>

</body>
</html>